<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'title'
  },
  button: {
    type: String,
    default: 'button'
  },
  to: {
    type: String,
    default: ''
  }
});
</script>

<template>
  <div
    class="use-netdisk w-full min-h-[250px] bg-[#F5F7FA] text-center font-bold mb-[70px] flex flex-col justify-center items-center mobile:h-[200px]"
  >
    <h1 class="text-[42px] leading-[150px] mobile:text-2xl mobile:mb-[20px]">
      {{ props.title }}
    </h1>
    <slot></slot>
    <router-link :to="{ name: props.to }">
      <div
        class="button w-[160px] h-[60px] leading-[60px] mb-[30px] bg-[#DCF5FB] text-[#00E1FF] text-center cursor-pointer rounded-lg"
      >
        {{ props.button }}
      </div>
    </router-link>
  </div>
</template>

<style scoped lang="scss"></style>
